<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<%@ taglib prefix="l" uri="/WEB-INF/struts-logic.tld"%>

<%@ taglib uri="/WEB-INF/hexacta.tld" prefix="hexacta"%>

<head>
<sx:head cache="true" />
<link rel="stylesheet" href="/hrs-intranet/styles/errortag.css"
	type="text/css" />
<link rel="stylesheet" href="/hrs-intranet/styles/TabContainerLocal.css"
	type="text/css" />
<link rel="stylesheet" href="/hrs-intranet/styles/displaytag.css"
	type="text/css" />
<link rel="stylesheet" type="text/css"
	href="/hrs-intranet/styles/jsgantt.css" />

<link type="text/css"
	href="/hrs-intranet/js/jquery/css/ui-lightness/jquery-ui-1.8.16.custom.css"
	rel="stylesheet" />
<script type="text/javascript"
	src="/hrs-intranet/js/jquery/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript"
	src="/hrs-intranet/js/jquery/js/jquery-ui-1.8.16.custom.min.js"></script>

<style type="text/css">
	.tableRollOverEffect1{
		background-color:#005500;
		color:#FFF;
	}
</style>

<script type="text/javascript">
	function showDialog(id) {
		$(id).dialog('open');
		return false;
	}

	$(document).ready(function() {

		// Dialog			
		$("div[id^='dialog']").dialog({
			autoOpen : false,
			modal : true,
			draggable : false,
			resizable : false,
			width : 700,
			height : 'auto',
			hide: { effect: 'drop', direction: "down" },
			show: { effect: 'drop', direction: "up" }
		});

		// 				$("div[id^='dialog']").dialog('widget').find(
		// 						".ui-dialog-titlebar").hide();

		$(".ui-dialog-titlebar").hide();
	});
				var arrayOfRolloverClasses = new Array();
				var activeRow = false;
				var activeRowClickArray = new Array();
				
				function highlightTableRow(){
					var tableObj = this.parentNode;
					if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;

					if(this!=activeRow){
						this.setAttribute('origCl',this.className);
						this.origCl = this.className;
					}
					this.className = arrayOfRolloverClasses[tableObj.id];
					activeRow = this;
				}
				
				function resetRowStyle(){
					var tableObj = this.parentNode;
					if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;

					if(activeRowClickArray[tableObj.id] && this==activeRowClickArray[tableObj.id]){
						this.className = arrayOfClickClasses[tableObj.id];
						return;	
					}
					var origCl = this.getAttribute('origCl');
					if(!origCl)origCl = this.origCl;
					this.className=origCl;
				}
					
				function addTableRolloverEffect(tableId,whichClass){
					arrayOfRolloverClasses[tableId] = whichClass;
					
					var tableObj = document.getElementById(tableId);
					var tBody = tableObj.getElementsByTagName('tbody');
					if(tBody){
						var rows = tBody[0].getElementsByTagName('tr');
					}else{
						var rows = tableObj.getElementsByTagName('tr');
					}
					for(var no=0;no<rows.length;no++){
						rows[no].onmouseover = highlightTableRow;
						rows[no].onmouseout = resetRowStyle;
					}
					
				}
</script>

</head>

<s:include value="errorsSection.jsp"></s:include>

<script type="text/javascript">
	
</script>

<s:form cssClass="formClass">
		<s:textfield name="periodId" label="Period" readonly="true" />
		<sx:autocompleter list="evaluatedEmployees" listValue="person.name"
			searchType="startstring" listKey="id" showDownArrow="false"
			resultsLimit="-1"
			keyName="evaluatedId" name="employeeName" label="Employee" />
		<sx:autocompleter list="roles" listValue="description"
			searchType="startstring"listKey="code" showDownArrow="false"
			resultsLimit="-1"
			keyName="roleCode" label="Role" />
  		<sx:autocompleter list="mentors" listValue="person.name"
			searchType="startstring" listKey="id" showDownArrow="false"
			resultsLimit="-1"
			keyName="mentorId" label="Mentor" />
 		<s:submit action="EmployeeFeedbackSummaryAction_filter" key="Filter" align="center" style="text-align: center" 
			cssClass="btn" id="okbtn" />
</s:form>


<s:if test="%{showReturn}">
	<s:a href="FeedbackPeriodsAction" cssClass="Add" cssStyle="position:relative; left:1000px;">Go to Manage Feedback Periods</s:a>
</s:if>


<s:fielderror />
<display:table id="filteredFeedbackPeriods" name="feedbackPeriods"
	defaultsort="5" defaultorder="descending"
	requestURI="EmployeeFeedbackSummaryAction_filter" class="listable"
	cellpadding="0" cellspacing="0" pagesize="20">
	<display:column property="employee.location.abbreviation" title="Office" style="text-align: center"
		sortable="true" />
	<display:column property="employee.person.name" title="Employee" 
		sortable="true" />
	<display:column property="employee.hoursPerDay" title="Hrs" style="text-align: center"
		sortable="true" format="{0,number,0}" />
	<display:column property="employee.dateStart" title="First Day" style="text-align: center"
		sortable="true" format="{0,date,dd/MM/yyyy}" />
	<display:column property="employee.firstEmployeeDate" title="RD" style="text-align: center"
		sortable="true" format="{0,date,dd/MM/yyyy}" />
	<display:column title= "Years" sortable="false" style="text-align: center">
		<s:if test=" (#attr.filteredFeedbackPeriods.employee.getEmployeeeDependencyEndYearAntiquity(periodId) <= 12 )
		&& (#attr.filteredFeedbackPeriods.employee.getEmployeeeDependencyEndYearAntiquity(periodId)>= 5)  " >
			<font style="color: #418282;">
				<s:property value="#attr.filteredFeedbackPeriods.employee.getEmployeeEndYearAntiquity(periodId)"/>
			</font>
		</s:if>
		<s:else>	
			<s:if test=" #attr.filteredFeedbackPeriods.employee.getEmployeeeDependencyEndYearAntiquity(periodId)<5 " >
				<font style="color: #CC3333;">
					<s:property value="#attr.filteredFeedbackPeriods.employee.getEmployeeEndYearAntiquity(periodId)"/>
				</font>
			</s:if>
			<s:else>
				<s:property value="#attr.filteredFeedbackPeriods.employee.getEmployeeEndYearAntiquity(periodId)"/>
			</s:else>
		</s:else>
	</display:column>
	<display:column property="actualBand.description" title="Role" 
		sortable="true" />
	<display:column property="actualPosition" title="Band"  style="text-align: center"
		sortable="true" format="{0,number,0} %" />
	<display:column property="mentor.person.name"
		title="Mentor" sortable="true" />
	<display:column property="newPerformance" title="Final Perf." sortable="true" />
	<display:column property="newCommitment" title="Final Comm." sortable="true" />
	<display:column property="newFinalBand.description" title="New Role" sortable="true" />
	<display:column property="displayableNewFinalPosition" title="Band" sortable="true" style="text-align: center" />
	<display:column title="Training" sortable="false" style="text-align: center">
		<!-- Edit comment dialog -->
		<div id="dialog${filteredFeedbackPeriods.id}" title="Edit comment">
			<label class="label"><b>Trainings for
					${filteredFeedbackPeriods.employee.person.fullName} Year
					${filteredFeedbackPeriods.period.year} </b> </label>

			<display:table id="trainingOcasion"
				name="${filteredFeedbackPeriods.employee.trainings}"
				class="listable" cellpadding="0" cellspacing="0">
				<display:column property="training.date" title="Date"
					sortable="false" format="{0,date,dd/MM/yyyy}" />
				<display:column property="training.name" title="Training Name"
					sortable="false" />
			</display:table>
			<br />
			<div align="right">
				<input type="button" value="Cancel" class="btn" style="text-align: center"
					onclick="$('#dialog${filteredFeedbackPeriods.id}').dialog('close');" />
			</div>

		</div>
		<a href="#" id="dialog_link"
			onclick="javascript: return showDialog('#dialog${filteredFeedbackPeriods.id}');">
			<!-- <img height="16px;" width="16px;" src="../images/feedback-add.png" /> -->
			Ver
		</a>
	</display:column>
<%-- 	<display:column title="Milestones" sortable="true" /> --%>
	<display:column title="AE" sortable="false">
	<s:if test=" (#attr.filteredFeedbackPeriods.selfevaluation != null ) ">
		<s:url var="aevalUrl"
			action="EmployeeFeedbackSummaryAction_downloadAutoevaluation">
			<s:param name="feedbackId" value="#attr.filteredFeedbackPeriods.id" />
		</s:url>
		<s:a href="%{aevalUrl}">
			<!-- <img height="16px;" width="16px;" src="../images/feedback-report.png" /> -->
			Ver
		</s:a>
	</s:if>
	</display:column>
	<display:column title="Dis." sortable="false">
	<s:if test=" (#attr.filteredFeedbackPeriods.discharge != null) ">
		<s:url var="aevalUrl"
			action="EmployeeFeedbackSummaryAction_downloadDischarge">

			<s:param name="feedbackId" value="#attr.filteredFeedbackPeriods.id" />
		</s:url>
		<s:a href="%{aevalUrl}" style="text-align: center">
			<!-- <img height="16px;" width="16px;" src="../images/feedback-report.png" /> -->
			Ver
		</s:a>
	</s:if>
	</display:column>
</display:table>
<script type="text/javascript">
	addTableRolloverEffect('filteredFeedbackPeriods','tableRollOverEffect1');
</script>